<template>
	<view class="wrap">
		<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :border="false" :fixed="true" :status-bar="true"
			background-color="transparent"></uni-nav-bar>

		<view class="flex justify-around">
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/store-font@2x.png" class="title"
				mode="">
			</image>
		</view>

		<view class="content px-32">
			<view class="jin-wrap">
				<view class="qiu-wrap" v-for="(item,index) in list" :key="item.id" :style="{
					left:item.left + 'rpx',
					top:item.top + 'rpx'
				}" :class="{
					'qiu-animation':item.animation
				}" @click="handleQiuClick(item)">
					<view class="qiu text-center">
						{{item.price}}
					</view>
					<view class="text-24 text-center" style="color: #31AA17;">
						{{item.isOnline ? '线上' : '线下'}}收益
					</view>
				</view>
			</view>
			<view class="btn-wrap flex justify-around">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/button_linqu@2x.png"
					mode="heightFix" @click="confirm"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow() {
			thro = this
			this.getData()
		},
		methods: {
			getRandomNumber(min, max) {
				// 计算范围内的随机数
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			confirm: throttle(2000,async () => {
				const res = await thro.$Api.index.redPacketAll()
				thro.list.forEach(item => {
					thro.qiuPlayY(item)
					thro.qiuPlayX(item)
				})
			}),
			handleQiuClick: throttle(2000, async (item) => {
				const res = await thro.$Api.index.redPacketReceive(item.id)
				thro.qiuPlayY(item)
				thro.qiuPlayX(item)
			},{
				noTrailing:true
			}),
			qiuPlayX(item) {
				item.xSetInterval = setInterval(() => {
					if (item.left < 200) {
						item.left += 2
					}
					if (item.left >= 300) {
						clearInterval(item.xSetInterval)
					}
				}, 20)

				item.xSetInterval2 = setInterval(() => {
					if (item.left > 400) {
						item.left -= 2
					}
					if (item.left <= 300) {
						clearInterval(item.xSetInterval2)
					}
				}, 20)


				// if (item.left < 200) {
				// 	item.left += 2
				// 	requestAnimationFrame(() => {
				// 		if (item.left < 350) {
				// 			this.qiuPlayX(item)
				// 		}
				// 	})
				// }

				// if (item.left > 400) {
				// 	item.left -= 2
				// 	requestAnimationFrame(() => {
				// 		if (item.left < 600 && item.left > 300) {
				// 			this.qiuPlayX(item)
				// 		}
				// 	})
				// }
			},
			qiuPlayY(item) {
				item.animation = false
				// if (item.top < 930) {
				// 	item.top += 10 
				// 	requestAnimationFrame(() => {
				// 		this.qiuPlayY(item)
				// 	})
				// }
				item.ySetInterval = setInterval(() => {
					if (item.top < 930) {
						item.top += 10
					} else {
						clearInterval(item.ySetInterval)
					}
				}, 20)

			},
			async getData() {
				const res = await this.$Api.index.moneyRedPacket()
				this.list = res.redPacketList.map(item => {
					return {
						left: this.getRandomNumber(0, 574),
						top: this.getRandomNumber(20, 288),
						...item,
						animation: true,
						ySetInterval: null,
						xSetInterval: null,
						xSetInterval2: null
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.wrap {
		width: 100%;
		height: 100%;
	}

	.wrap {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/store-image-bg@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.title {
		width: 564rpx;
		height: 148rpx;
		margin-top: 72rpx;
	}

	.content {
		height: 1000rpx;
		margin-top: 48rpx;
	}

	.jin-wrap {
		width: 100%;
		height: 900rpx;
		position: relative;
		overflow: hidden;
	}

	.btn-wrap {
		width: 100%;
		height: 100rpx;

		image {
			height: 100%;
		}
	}

	.qiu-wrap {
		position: absolute;
	}

	.qiu-animation {
		animation: float 2s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20rpx);
		}
	}

	.qiu {
		width: 112rpx;
		height: 112rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image-pao.png) no-repeat;
		background-size: 100% 100%;
		line-height: 112rpx;
	}
</style>